<template>
<div>
  <el-row style="height:40px;background:white;margin-top:5px">
    <div v-show="sruveyListFirst.length > 0">
      <el-col :span="25">
      <el-badge :value="totalCount > 0 ? totalCount : ''" :max="99" class="itemBadge">
        <el-button type="text" class="itemButton" @click.native="clickJump('myPendingApproval')" size="mini">
          <el-image class="itemImage" src="/static/images/paojectManager/pendingApproval.png"></el-image>我的待审批
        </el-button>
      </el-badge>
      </el-col>
      <el-col :span="25">
      <el-badge :value="myTaskCount > 0 ? myTaskCount : ''" :max="99" class="itemBadge">
        <el-button type="text" class="itemButton" @click.native="clickJump('myTask')" size="mini">
          <el-image class="itemImage" src="/static/images/paojectManager/mytaskapproval.png"></el-image>我的任务
        </el-button>
      </el-badge>
      </el-col>
      <el-col v-for="item in sruveyListFirst" :key="item.code" :span="25">
        <el-badge :value="item.value > 0 ? item.value : ''" :max="99" class="itemBadge">
          <el-button type="text" class="itemButton" @click.native="clickJump(item.code)" size="mini">
            <el-image class="itemImage" :src="item.iconImg"></el-image>{{ item.name }}
          </el-button>
        </el-badge>
    </el-col>
    </div>
  </el-row>
  <el-row style="height:40px;background:white">
    <div v-show="sruveyListSecond.length > 0">
      <el-col v-for="item in sruveyListSecond" :key="item.code" :span="25">
        <el-badge :value="item.value > 0 ? item.value : ''" :max="99" class="itemBadge">
          <el-button type="text" class="itemButton" @click.native="clickJump(item.code)" size="mini">
            <el-image class="itemImage" :src="item.iconImg"></el-image>{{ item.name }}
          </el-button>
        </el-badge>
      </el-col>
    </div>
  </el-row>
</div>
</template>

<script>
import { getAction } from '@tapui/utils/http'
// 异常情况概览
export default {
  name: 'exceptionOverview',
  // mixins: [mixin_list],
  data() {
    return {
      sruveyListFirst: [{ code: "backlogAppointmentNum", name: "任命待办", iconImg: "/static/images/paojectManager/backlogappointment.png" }, { code: "backlogPlanNum", name: "策划待办", iconImg: "/static/images/paojectManager/backlogPlan.png" }],
      sruveyListSecond: [{ code: "overdueProjectNum", name: "超期项目", iconImg: "/static/images/paojectManager/overdueProject.png" }, { code: "overdueMilepostNum", name: "超期里程碑及任务", iconImg: "/static/images/paojectManager/overdueMilepostFlag.png" }, { code: "overdueProjectTaskNum", name: "超期任务", iconImg: "/static/images/paojectManager/overdueProjectTask.png" }, { code: "overdueAppointmentNum", name: "超期任命", iconImg: "/static/images/paojectManager/overdueAppointment.png" }, { code: "overduePlanNum", name: "超期策划", iconImg: "/static/images/paojectManager/overduePlan.png" }],
      orgOrPersonOrPartion: '',
      sourcetypeList: [],
      myTaskCount: 0,
      url: {
        queryOverdueInfo: 'mpm/mpmIndex/queryOverdueInfo',
        querySouceTypeCount: '/cbo/approvalNodeIns/querySouceTypeCount',
        myTaskCount: '/mpm/projectTask/myTaskCount'

      }
    }
  },
  methods: {
    /**
     * dataPermission：权限标志（公司，我负责的、我参与的）
     */
    getOverdueInfo(dataPermission) {
      this.orgOrPersonOrPartion = dataPermission.dataPermissionFlag
      getAction(this.url.queryOverdueInfo, dataPermission).then((result) => {
        var arrayFirst = result.result.slice(0, 2)
        var arraySecond = result.result.slice(2)
        this.sruveyListFirst = arrayFirst
        this.sruveyListSecond = arraySecond
      })
    },
    clickJump(exceptionCode) {
      if (exceptionCode === 'overdueMilepostNum') {
        this.$router.push({
          name: 'projectMilepostJump',
          params: {
            qry_permission: this.orgOrPersonOrPartion,
            qry_overdue: 1
          }
        })
      } else if (exceptionCode === 'overdueProjectNum') {
        this.$router.push({
          name: 'projectForIndexJump',
          params: {
            qry_permission: this.orgOrPersonOrPartion,
            qry_overdue: 1
          }
        })
      } else if (exceptionCode === 'overdueProjectTaskNum') {
        this.$router.push({
          name: 'mpmOverTask',
          params: {
            qry_permission: this.orgOrPersonOrPartion,
            qry_overdue: 1
          }
        })
      } else if (exceptionCode === 'myPendingApproval') {
        this.$router.push({
          name: 'myPendingApprovalList'
        })
      } else if (exceptionCode === 'myTask') {
        this.$router.push({
          name: 'myTaskList'
        })
      } else if (exceptionCode === 'overdueAppointmentNum') {
        this.$router.push({
          name: 'appointmentForIndexJump',
          params: {
            qry_permission: this.orgOrPersonOrPartion,
            qry_overdue: 1
          }
        })
      } else if (exceptionCode === 'overduePlanNum') {
        this.$router.push({
          name: 'planForIndexJump',
          params: {
            qry_permission: this.orgOrPersonOrPartion,
            qry_overdue: 1
          }
        })
      } else if (exceptionCode === 'backlogAppointmentNum') {
        this.$router.push({
          name: 'appointmentForBacklog',
          params: {
            qry_permission: this.orgOrPersonOrPartion,
            qry_overdue: 0
          }
        })
      } else if (exceptionCode === 'backlogPlanNum') {
        this.$router.push({
          name: 'planForBacklog',
          params: {
            qry_permission: this.orgOrPersonOrPartion,
            qry_overdue: 0
          }
        })
      }
    }
  },
  mounted() {
    // 查询各个待审批的单据
    getAction(this.url.querySouceTypeCount).then((res) => {
      this.sourcetypeList = res.result
    })
    // 查询我的任务数量
    getAction(this.url.myTaskCount, { qry_responsiblecode: this.$store.getters.user.code, qry_state: 9, qry_taskstate: '0,1' }).then((res) => {
      if (res.result) {
        this.myTaskCount = res.result
      }
    })
  },
  created() { },
  computed: {
    // 我的待办数量
    totalCount() {
      let total = 0
      this.sourcetypeList.forEach((m) => {
        total += m.count
      })
      return total
    },
     // 当前用户是否是经营管理部 PMO
    isPMO() {
      if (this.$store.getters.roles.includes("businessManager")) {
       return true
      } else {
       return false
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.parentCenter {
  display: flex;

  background: #cecece;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
}

.child {
  background: #000;
  width: 10%;
  height: 10%;
}
.itemImage {
  margin-right: 5px;
  width: 18px;
  height: 18px;
  vertical-align: -0.25rem;
}
.itemButtonGroup {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.itemBadge {
  height: 100%;
}
.itemBadge /deep/ .el-badge__content {
  top: 6% !important;
  right: 18% !important;
}
/deep/ .itemButton {
  font-size: 15px;
  color: #606266;
  padding: 7px 15px;
  @media screen  and (max-width:1380px) {
    padding: 7px 5px;
    >span {
    display: inline-block;
    width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    }
  }
}
/deep/.itemButton:hover {
  font-size: 15px;
  color: #3b8bdb;
  >span{
    display: inline-block;
    overflow:visible;
  }
}
.el-col-25 {
  width: 20%;
}
</style>
